<template>
  <div >
    <van-row>
        <van-nav-bar
            title="汉堡"
            fixed
            placeholder
            left-text="返回"
            @click-left="onCancel"
        >
          <template #left>
            <van-icon   @click="onCancel" color="black" size="22" name="arrow-left" />
          </template>
        </van-nav-bar>


      <van-col span="24">
        <van-dropdown-menu >
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </van-col>
      <van-col span="24" v-for="i in 2" style="margin-top: .5rem;">
        <van-cell-group inset >
             <van-cell :border="false" center>
               <template #icon>
                 <van-image
                     style="padding-right: 10px;"
                     width="50"
                     height="50"
                     :lazy-load="true"
                     fit="fill"
                     src="https://gitee.com/herther/img/raw/master/img/20210912143504.png"
                 />
               </template>
                <template #title>
                   <span style="font-size: 1.2em; font-weight: bold;">华莱士(工学院店)</span>
                </template>
                <template #label>
                      <span>月销：4666</span>
                      <span style="padding-left: .3rem;">起送￥20</span>

                </template>
                <template #right-icon>
                    <span>34分钟 · 2.6km</span>
                </template>
             </van-cell>

            <van-cell>
              <van-grid :border="false">
                <van-grid-item >
                  <template #icon>
                    <van-image
                         width="50"
                         height="50"
                         :lazy-load="true"
                         fit="fill"
                         src="https://gitee.com/herther/img/raw/master/img/20210914161025.png"
                     />
                  </template>
                  <template #text>
                    <span style="font-size: 1em;  overflow: hidden;white-space: nowrap; text-overflow:ellipsis;">双人餐汉堡</span>
                    <span style="color: #f52443; font-weight: bold; font-size: 1em;">￥27.5</span>
                  </template>
                </van-grid-item>
                <van-grid-item >
                  <template #icon>
                    <van-image
                        width="50"
                        height="50"
                        :lazy-load="true"
                        fit="fill"
                        src="https://gitee.com/herther/img/raw/master/img/20210915171138.png"
                    />
                  </template>
                  <template #text>
                    <span style="font-size: 1em;  overflow: hidden;white-space: nowrap; text-overflow:ellipsis;">香辣鸡腿堡大可</span>
                    <span style="color: #f52443; font-weight: bold; font-size: 1em;">￥27.5</span>
                  </template>
                </van-grid-item>
              </van-grid>
            </van-cell>
        </van-cell-group>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "ProductList",
  data(){
    return{
      value:'',
      placeholder:'请输入美食',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '综合排序', value: 0 },
        { text: '好评优先', value: 1 },
      ],
      option2: [
        { text: '销量', value: 'a' },
      ],
    }
  },
  methods: {
    onCancel(){
      this.$router.replace("/Search")
    }
  },
  computed:{

  },

}
</script>

<style scoped>

</style>
